<script lang="ts" setup>
import { Page, useVbenModal } from '@vben/common-ui';

import { Button, Col, Row, Select, Tag } from 'ant-design-vue';

import { $t } from '#/locales';

import { useIndex } from './crud';

defineOptions({
  name: '枚举字典',
  inheritAttrs: false,
});

const { Grid, handleBatchImport, groupRef, groupList, whetherList } =
  useIndex();

// 辅助函数：根据exist值从whetherList中查找对应的元素
const findWhetherItem = (existValue: boolean | undefined) => {
  if (!whetherList || existValue === undefined) return null;
  // 将boolean值转换为字符串进行比较
  const existString = String(existValue);
  return whetherList.find((item) => item.key === existString);
};

const [Modal, modalApi] = useVbenModal({
  footer: false,
  async onOpened() {},
  onConfirm() {},
});

defineExpose({ modalApi });
</script>
<template>
  <Modal
    :title="$t('devOperation.system.defDict.table.enumDict')"
    class="w-[60%]"
  >
    <Page auto-content-height>
      <Grid>
        <template #toolbar-tools>
          <Select
            class="mr-2"
            label-in-value
            :placeholder="
              $t('devOperation.system.defDict.tips.selectDictGroup')
            "
            style="width: 200px"
            v-model:value="groupRef"
            :options="groupList"
          />
          <Button type="primary" @click="handleBatchImport">
            {{ $t('common.title.import') }}
          </Button>
        </template>
        <template #expandedRowRender="{ row }">
          <template v-for="item in row.itemList" :key="item.uniqKey">
            <Row class="m-dict-item" type="flex">
              <Col flex="auto">{{ item.key }}</Col>
              <Col flex="auto">{{ item.name }}</Col>
              <Col flex="auto">
                <Tag
                  v-if="whetherList"
                  :color="findWhetherItem(item.exist)?.propType"
                >
                  {{ findWhetherItem(item.exist)?.name }}
                </Tag>
              </Col>
              <Col flex="100px" />
            </Row>
          </template>
        </template>
      </Grid>
    </Page>
  </Modal>
</template>
<style lang="less" scoped>
.m-dict-item {
  padding-left: 150px;
  line-height: 36px;
  text-align: center;
}
</style>
